
html,
body {
    margin: 0;
    padding: 0;
    font-size:16px;
}

.content {
    position: relative;
}

#main {
    background-color: #e9ecff;
    min-height: 800px;
}

#menu {
    background-color: rgb(67, 47, 191);
    position: fixed;
    bottom: 0;
    left: 0;
    height: 4.375rem;
    width: 100%;
}


.bar {
    display: flex;
    width: inherit;
    height: inherit;
    justify-content: space-around;
    align-items: center;
}

.item {
    width: 5.625rem;
    position: relative;
    text-align: center;
    color:#9a9a9a;
    line-height: 2.81rem;
    transition: all .1s ease-in-out;
}

/* 1.x 遮罩层 - 对应样式配置： */
.active-box-filter{
  display: inline-block;
  position: absolute;
  width: 30%;
  height: 54%;
  background-color: rgba(255, 255, 255, 0.2);
  top: 23%;
  left: 2%;
  border-radius: 10px;
  transform: translateX(0px);
  transition: all .3s ease-in-out;
}

.active-item{
    color:white;
    transition: all .1s ease-in-out;
}


.icon{
  display: inline-block;
  
  /* 2. 加上如下代码 ->目的是水平往右移动, 重叠在text的位置 */
  transform: translateX(130%);
  
  /* 2.x 图标要变化, 给它加 "transition" */
  transition: all .2s ease-in-out;
}

.text{
    /* 3. 默认 "未活跃" 的文字 处于看不到的状态： */
    opacity: 0;

    /* 3.x 文字也要变化, 也给它加 "transition" */
    transition: all .2s ease-in-out;
}

/* 4. 处于活跃状态后, 图标左移、文字能看见： */
/* "活跃" 类名：active-item */
.active-item .icon{
    transform: translateX(-15%);
}
.active-item .text{
    opacity: 1;
}
